<template>
	<div class="app-editor-container app-number-range-picker">
		<a-input-number
			v-model:value="minValue"
			:min="min"
			:max="maxLimit"
			:size="size"
			:step="step"
			:key="startName"
			:disabled="disabled"
			:readonly="readOnly"
			:precision="precision"
			:placeholder="startPlaceholder"
			@change="(value: number) => { onChange(value, 0)}"
			@click="onClick"
			@focus="onFocus"
			@blur="onBlur"
		/>
		<div class="app-number-range-picker__separator">~</div>
		<a-input-number
			v-model:value="maxValue"
			:min="minLimit"
			:max="max"
			:size="size"
			:step="step"
			:key="endName"
			:disabled="disabled"
			:readonly="readOnly"
			:precision="precision"
			:placeholder="endPlaceholder"
			@change="(value: number) => { onChange(value, 1)}"
			@click="onClick"
			@focus="onFocus"
			@blur="onBlur"
		/>
	</div>
</template>
<script setup lang="ts">
import { computed, Ref } from 'vue';
import { numberRangePickerProps } from './number-range-picker';
import { IEvent } from '@/core';
import { Form } from 'ant-design-vue';
import { useEditorTypeParams } from '@/hooks/use-editor';
interface EditorEmit {
	(name: 'component-action', value: IEvent<string>): void;
}
const formItemContext = Form.useInjectFormItemContext();
const triggerChange = () => {
	formItemContext.onFieldChange();
};

const props = defineProps(numberRangePickerProps);
const emit = defineEmits<EditorEmit>();
// 类型校验
const { validateConfig } = useEditorTypeParams();
validateConfig();
const items: Ref<number[]> = ref([]);

const startName = computed(() => {
	if (props.valueItemNames) {
		return props.valueItemNames.split(',')[0];
	}
});
const endName = computed(() => {
	if (props.valueItemNames) {
		return props.valueItemNames.split(',')[1];
	}
});

const minValue = computed(() => {
	if (startName.value) {
		const value =
			props.data[startName.value] && Number(props.data[startName.value]);
		items.value[0] = value;
		return value;
	} else if (props.value) {
		const value = Number(props.value.split(props.valueSeparator)[0]);
		items.value[0] = value;
		return value;
	} else {
		return null;
	}
});

const maxValue = computed(() => {
	if (endName.value) {
		const value =
			props.data[endName.value] && Number(props.data[endName.value]);
		items.value[1] = value;
		return value;
	} else if (props.value) {
		const value = Number(props.value.split(props.valueSeparator)[1]);
		items.value[1] = value;
		return value;
	} else {
		return null;
	}
});

const minLimit = computed(() => {
	if (minValue.value) {
		return minValue.value + props.step;
	} else if (props.min) {
		return props.min + props.step;
	} else {
		return -Infinity;
	}
});

const maxLimit = computed(() => {
	if (maxValue.value) {
		return maxValue.value - props.step;
	} else if (props.max) {
		return props.max - props.step;
	} else {
		return Infinity;
	}
});

const onChange = (value: number, index: number) => {
	items.value[index] = value;
	triggerChange();
	emit('component-action', {
		name: `${props.name}`,
		action: 'valueChange',
		data: items.value.join(props.valueSeparator),
	});
	if (props.valueItemNames && props.valueItemNames.split(',').length > index) {
		const valueName = props.valueItemNames.split(',')[index];
		emit('component-action', {
			name: valueName,
			action: 'valueChange',
			data: value.toString(),
		});
	}
};

const onClick = () => {
	emit('component-action', {
		name: `${props.name}`,
		action: 'editorClick',
		data: props.value,
	});
};

const onBlur = () => {
	triggerChange();
	emit('component-action', {
		name: `${props.name}`,
		action: 'editorBlur',
		data: props.value,
	});
};
const onFocus = () => {
	emit('component-action', {
		name: `${props.name}`,
		action: 'editorFocus',
		data: props.value,
	});
};
</script>
